<template>
  <div>
    <div class="tableFiltersWrap">
      <el-row class="txt-right">
        <el-col>
          <v-form :fields="fields" :fieldsData="tableParams">
            <el-col :span="6" class="txt-left">
              <el-button type="primary" @click="fecthData">查询</el-button>
              <el-button type="default" @click="reloadData">清空</el-button>
            </el-col>
          </v-form>
        </el-col>
      </el-row>
    </div>
    <v-page>
      <el-card shadow="never" class="card-header-tabs">
        <div class="text item">
          <basic-table ref="basicTable" :columns="columns" :call-server="callServer" @selectionChange="selectionChange" :height="height"
            v-model="tableParams"></basic-table>
        </div>
      </el-card>
    </v-page>
  </div>
</template>

<script>
import { getInstanceList, print } from '#/api/processDef';
import basicTable from "_c/tables";

export default {
  components: {
    basicTable,
  },
  created() {
    window.addEventListener('resize', this.handleResize);
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
  },
  data() {
    return {
      tableParams: {},
      multipleSelection: [],
      currentItem: {},
      currentRecord: {},
      height: window.innerHeight - 258
    };
  },
  computed: {
    fields() {
      return [
        {
          label: "",
          prop: "name",
          span: 4,
          type: "text",
          placeholder: "请输入申请类型",
        } 
      ]
    },
    columns() {
      return [
        {
          label: "申请类型",
          prop: "name",
          width: 800,
        },
        {
          label: "申请人",
          prop: "startXm",
          width: 200,
        },
        {
          label: "申请时间",
          prop: "startTime",
          width: 200,
        },
        {
          label: "状态",
          prop: "startActName",
          width: 200,
        },
        {
          label: "操作",
          fixed: "right",
          width: 90,
          render: (h, row) => {
            return (
              <div>
                <el-button type="text" onClick={() => this.print(row)} size="middle" class="txt-highlight">打印</el-button>
              </div>
            );
          },
        },
      ]
    }
  },
  methods: {
    handleResize() {
      this.height = window.innerHeight - 258;
    },
    callServer() {
      return getInstanceList;
    },
    fecthData() {
      this.$refs.basicTable.fecthData();
    },
    reloadData() {
      this.tableParams = {}
      this.$refs.basicTable.reload();
    },
    selectionChange(val) {
      this.multipleSelection = val;
    },
    print(row) {
      print({ businessDataId: row.businessDataId, ywlx: row.ywlx },  row.name + '-' + row.startXm);
    }
  },
};
</script>